<template>
  <div class="app-container">
    <div class="search-result">
      <!-- 顶部导航区域 -->
      <div class="top-nav">
        <el-button type="primary" plain @click="goBack">
          <el-icon><back /></el-icon>
          返回首页
        </el-button>
      </div>

      <!-- 搜索区域 -->
      <div class="search-header">
        <div class="search-box">
          <el-input
            v-model="keyword"
            placeholder="请输入书名搜索"
            class="search-input"
            clearable
            @keyup.enter="handleSearch"
          >
            <template #append>
              <el-button type="primary" @click="handleSearch">
                <el-icon><search /></el-icon>
              </el-button>
            </template>
          </el-input>
        </div>
      </div>

      <!-- 搜索结果区域 -->
      <div class="result-content">
        <div class="result-header">
          <h2>搜索结果</h2>
          <p class="result-count">共找到 {{ total }} 条相关结果</p>
        </div>

        <!-- 图书列表 -->
        <div class="book-list" v-if="total > 0">
          <el-row :gutter="20">
            <el-col :span="6" v-for="book in bookList" :key="book.id">
              <el-card :body-style="{ padding: '0px' }" class="book-card" @click="handleBookClick(book.id)">
                <img :src="getImageUrl(book.pic)" class="book-image"/>
                <div class="book-info">
                  <h3>{{ book.name }}</h3>
                  <p class="author">{{ book.brandName }}</p>
                  <p class="price">¥{{ book.price }}</p>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>

        <!-- 无结果提示 -->
        <div v-else class="no-result">
          <el-empty description="暂无相关图书" />
        </div>
        
        <!-- 分页器 -->
        <el-pagination
          v-if="total > 0"
          :current-page="queryParams.pageNum"
          :page-size="queryParams.pageSize"
          :total="total"
          layout="total, prev, pager, next, jumper"
          @current-change="handleCurrentChange"
          class="pagination"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { frontListBook, frontGetBook } from "@/api/merchant/book"
import { ElMessage } from 'element-plus'
import { Search, Back } from '@element-plus/icons-vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()
const keyword = ref('')
const bookList = ref([])
const total = ref(0)
const queryParams = ref({
  pageNum: 1,
  pageSize: 12,
  name: '',
  publishStatus: 1
})

// 获取图片URL
const baseUrl = import.meta.env.VITE_APP_BASE_API
const getImageUrl = (path) => {
  if (path && path.startsWith('/profile')) {
    return baseUrl + path
  }
  return path
}

// 搜索处理
const handleSearch = () => {
  if (!keyword.value) {
    ElMessage({
      message: '请输入搜索关键词',
      type: 'warning'
    })
    return
  }
  queryParams.value.pageNum = 1
  queryParams.value.name = keyword.value
  getSearchResults()
  // 更新URL，但不触发新的导航
  router.push({
    query: { keyword: keyword.value }
  })
}

// 获取搜索结果
const getSearchResults = async () => {
  try {
    const res = await frontListBook(queryParams.value)
    if (res.code === 200) {
      bookList.value = res.rows
      total.value = res.total
    } else {
      ElMessage.error(res.msg)
    }
  } catch (error) {
    console.error('搜索失败:', error)
    ElMessage.error('搜索失败')
  }
}

// 处理页码改变
const handleCurrentChange = (page) => {
  queryParams.value.pageNum = page
  getSearchResults()
}

// 修改图书点击处理函数
const handleBookClick = (bookId) => {
  router.push(`/product/detail/${bookId}`)
}

onMounted(() => {
  // 从URL获取搜索关键词
  const urlKeyword = route.query.keyword
  if (urlKeyword) {
    keyword.value = urlKeyword
    queryParams.value.name = urlKeyword
    getSearchResults()
  }
})

// 添加返回首页方法
const goBack = () => {
  router.push('/')
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 40px;
  background: linear-gradient(135deg, #f6f8fb 0%, #f1f4f9 100%);
  min-height: 100vh;
}

.search-result {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;

  .top-nav {
    margin-bottom: 32px;
    
    .el-button {
      background: linear-gradient(45deg, #8B4513, #D2691E);
      border: none;
      color: white;
      padding: 12px 24px;
      font-size: 16px;
      border-radius: 12px;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      
      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(139, 69, 19, 0.25);
      }
      
      .el-icon {
        margin-right: 8px;
      }
    }
  }

  .search-header {
    background: #fff;
    padding: 40px;
    margin-bottom: 40px;
    border-radius: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);

    .search-box {
      max-width: 800px;
      margin: 0 auto;

      .search-input {
        :deep(.el-input__wrapper) {
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
          border-radius: 16px;
          padding: 4px 8px;
          transition: all 0.3s ease;
          
          &:hover {
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
          }
          
          &.is-focus {
            box-shadow: 0 8px 24px rgba(139, 69, 19, 0.15);
          }
          
          .el-input__inner {
            height: 48px;
            font-size: 16px;
            color: #2c3e50;
            
            &::placeholder {
              color: #95a5a6;
            }
          }
        }

        :deep(.el-input-group__append) {
          background: linear-gradient(45deg, #8B4513, #D2691E);
          border: none;
          padding: 0;
          border-radius: 0 16px 16px 0;
          overflow: hidden;
          
          .el-button {
            padding: 16px 32px;
            height: 48px;
            color: white;
            font-size: 16px;
            border: none;
            background: transparent;
            transition: all 0.3s ease;
            
            .el-icon {
              font-size: 20px;
            }
            
            &:hover {
              background: rgba(255, 255, 255, 0.1);
            }
          }
        }
      }
    }
  }

  .result-content {
    background: #fff;
    padding: 40px;
    border-radius: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    
    .result-header {
      margin-bottom: 40px;
      position: relative;
      padding-left: 20px;
      
      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 8px;
        width: 4px;
        height: 24px;
        background: linear-gradient(45deg, #8B4513, #D2691E);
        border-radius: 2px;
      }
      
      h2 {
        font-size: 28px;
        color: #2c3e50;
        margin-bottom: 12px;
        font-weight: 600;
      }

      .result-count {
        color: #7f8c8d;
        font-size: 16px;
      }
    }

    .book-list {
      margin: 0 -12px 40px;
      
      .el-row {
        margin: 0 !important;
      }
      
      .el-col {
        padding: 12px !important;
      }
    }

    .book-card {
      border: none;
      border-radius: 16px;
      overflow: hidden;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      margin: 0;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);

      &:hover {
        transform: translateY(-8px);
        box-shadow: 0 12px 36px rgba(0, 0, 0, 0.12);
        
        .book-image {
          transform: scale(1.05);
        }
      }

      .book-image {
        width: 100%;
        height: 280px;
        object-fit: cover;
        transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
      }

      .book-info {
        padding: 20px;
        background: linear-gradient(145deg, #ffffff, #f8f9fa);

        h3 {
          font-size: 18px;
          color: #2c3e50;
          font-weight: 600;
          margin-bottom: 12px;
          line-height: 1.4;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          white-space: normal;
          height: 50px;
        }

        .author {
          font-size: 15px;
          color: #7f8c8d;
          margin: 12px 0;
        }

        .price {
          font-size: 24px;
          font-weight: 700;
          margin: 0;
          background: linear-gradient(45deg, #8B4513, #D2691E);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }
    }

    .no-result {
      padding: 80px 0;
      text-align: center;
      
      :deep(.el-empty__description) {
        font-size: 16px;
        color: #7f8c8d;
      }
    }

    .pagination {
      margin-top: 40px;
      text-align: center;
      
      :deep(.el-pagination) {
        justify-content: center;
        
        .el-pagination__total,
        .el-pagination__jump {
          font-size: 15px;
          color: #7f8c8d;
        }
        
        .btn-prev,
        .btn-next,
        .el-pager li {
          background: transparent;
          border: none;
          color: #7f8c8d;
          font-size: 15px;
          font-weight: 500;
          transition: all 0.3s ease;
          
          &:hover {
            color: #8B4513;
          }
          
          &.is-active {
            color: #fff;
            background: linear-gradient(45deg, #8B4513, #D2691E);
            font-weight: 600;
          }
        }
      }
    }
  }
}

// 响应式布局优化
@media screen and (max-width: 768px) {
  .app-container {
    padding: 20px;
  }
  
  .search-result {
    .search-header {
      padding: 24px;
      
      .search-box {
        .search-input {
          :deep(.el-input__wrapper) {
            .el-input__inner {
              height: 40px;
              font-size: 14px;
            }
          }
          
          :deep(.el-input-group__append) {
            .el-button {
              padding: 12px 24px;
              height: 40px;
              font-size: 14px;
            }
          }
        }
      }
    }
    
    .result-content {
      padding: 24px;
      
      .result-header {
        h2 {
          font-size: 24px;
        }
      }
      
      .book-list {
        margin: 0 -8px 24px;
        
        .el-col {
          padding: 8px !important;
        }
      }
      
      .book-card {
        .book-image {
          height: 200px;
        }
        
        .book-info {
          padding: 16px;
          
          h3 {
            font-size: 16px;
            height: 44px;
          }
          
          .price {
            font-size: 20px;
          }
        }
      }
    }
  }
}
</style> 